<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <meta http-equiv="Content-Security-Policy-Report-Only" />
    <title>TimeCat</title>
</head>

<body>
    <div id="app">
        <div class='user-info'>
            <ul>
                <li v-for='(item,index) in userList' :key='index'>{{item.userList}}于{{item.optTime}}查看</li>
            </ul>
            <div class="audit">
                <button @click='sure("1") '>通过</button>
                <button @click='sure("2")'>拒绝</button>
            </div>
        </div>
        <div class="user-info-list">
            <ul>
                <li>数据主键: {{user_info.id}}</li>
                <li>业务员识别号: {{user_info.businessNo}}</li>
                <li>手机型号: {{user_info.phoneModel}}</li>
                <li>系统名称: {{user_info.sysName}}</li>
                <li>投保人姓名: {{user_info.appliName}}</li>
                <li>产品编号: {{user_info.productCode}}</li>
                <li>总保费: {{user_info.totalPremium}}</li>
                <li>上传时间: {{user_info.uploadTime}}</li>
                <li>审核状态: {{stateValue}}</li>

            </ul>
        </div>

    </div>
    <!-- <script id="time-cat" src="./timecat.js"></script> -->
    <script id="time-cat" src="../assets/libs/timecatjs.min.js"></script>
    <script src="../assets/libs/axios.min.js"></script>
    <script src="../assets/libs/vue/vue.min.js"></script>
    <!-- <script type="text/javascript" src="data.json"></script> -->
    <script id="time-cat-init">
        var app = new Vue({
            el: "#app",
            data: {
                userList: [],
                user_info: {},
                stateValue: ""
            },
            methods: {
                sure(value) {
                    const _this = this
                    let obj = {
                        id: _this.id, //数据主键id
                        businessNo: _this.businessNo, //业务识别号（保单号）
                        auditState: value == '1' ? '1' : '2'
                    }
                    axios({
                            method: 'post',
                            url: 'http://localhost:8080/slxt-web/collect/queryDataFile',
                            data: obj,
                        })
                        .then((data) => {
                            window.location.href =
                                "index1.html"

                        })
                        .catch((err) => {});
                }


            },
            created() {
                const _this = this
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                var id = ''
                var businessNo = ''
                console.log(id)
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == 'id') {
                        id = pair[1];
                    }
                    if (pair[0] == 'businessNo') {
                        businessNo = pair[1];
                    }
                }
                // console.log(id);
                let obj = {
                    id: id, //数据主键id
                    businessNo: businessNo, //业务识别号（保单号）
                }
                axios({
                        method: 'post',
                        url: 'http://localhost:8080/slxt-web/collect/queryDataFile',
                        data: obj,
                    })
                    .then((data) => {
                        console.log(data, '1111')
                        var lastJson = data.data.data
                        console.log(data.data.userList)
                        _this.userList = data.data.userList
                        console.log(_this.userList)
                        openMido(lastJson)
                    })
                    .catch((err) => {});




                let obj1 = {
                    id: id, //数据主键id
                    businessNo: businessNo, //业务识别号（保单号）

                }
                axios({
                        method: 'post',
                        url: 'http://localhost:8080/slxt-web/collect/queryDataList',
                        data: obj1,
                    })
                    .then((data) => {
                        _this.user_info = data.data.data[0]
                            // _this.stateValue = ''
                        console.log(data.data)
                        if (_this.user_info.state == 0) {
                            _this.stateValue = '未审核'
                        } else if (_this.user_info.state == 1) {
                            _this.stateValue = '通过'
                        } else if (_this.user_info.state == 2) {
                            _this.stateValue = '拒绝'
                        }
                    })
                    .catch((err) => {});

                function openMido(lastJson) {
                    var db = null;
                    var request = window.indexedDB.open("cat_db", 1);
                    request.onerror = function(event) {
                        // 错误处理
                        console.log(" 打开数据库报错");
                    };
                    request.onsuccess = function(event) {
                        // 成功处理
                        db = event.target.result;
                        if (!db.objectStoreNames.contains("cat_data")) {
                            const objectStore = db.createObjectStore("cat_data", {
                                autoIncrement: true,
                                keyPath: "id",
                            });
                            objectStore.createIndex("type", "type", {
                                unique: false,
                            });
                            objectStore.createIndex("data", "data", {
                                unique: false,
                            });
                            objectStore.createIndex("time", "time", {
                                unique: false,
                            });
                        }
                        var transaction = db.transaction(["cat_data"], "readwrite");
                        var objectStore = transaction.objectStore("cat_data");
                        lastJson.forEach(function(ele) {
                            objectStore.add(JSON.parse(ele));
                            // objectStore.add(ele);
                        });
                        timecat.replay({autoplay: true})
                        console.log("打开数据库成功");
                    };
                }

            },
        });
        // window.onload = function() {
        //     var query = window.location.search.substring(1);
        //     var vars = query.split("&");
        //     var id = ''
        //     var businessNo = ''
        //     for (var i = 0; i < vars.length; i++) {
        //         var pair = vars[i].split("=");
        //         if (pair[0] == 'id') {
        //             id = pair[1];
        //         }
        //         if (pair[0] == 'businessNo') {
        //             businessNo = pair[1];
        //         }
        //     }
        //     // console.log(id);
        //     let obj = {
        //         id: id, //数据主键id
        //         businessNo: businessNo, //业务识别号（保单号）
        //     }
        //     axios({
        //             method: 'post',
        //             url: 'http://localhost:9000/slxt-web/collect/queryDataFile',
        //             data: obj,
        //         })
        //         .then((data) => {
        //             console.log(data, '1111')
        //             var lastJson = data.data.data
        //             openMido(lastJson)
        //         })
        //         .catch((err) => {});
        //     function openMido(lastJson) {
        //         var db = null;
        //         var request = window.indexedDB.open("cat_db", 1);
        //         request.onerror = function(event) {
        //             // 错误处理
        //             console.log(" 打开数据库报错");
        //         };
        //         request.onsuccess = function(event) {
        //             // 成功处理
        //             db = event.target.result;
        //             if (!db.objectStoreNames.contains("cat_data")) {
        //                 const objectStore = db.createObjectStore("cat_data", {
        //                     autoIncrement: true,
        //                     keyPath: "id",
        //                 });
        //                 objectStore.createIndex("type", "type", {
        //                     unique: false,
        //                 });
        //                 objectStore.createIndex("data", "data", {
        //                     unique: false,
        //                 });
        //                 objectStore.createIndex("time", "time", {
        //                     unique: false,
        //                 });
        //             }
        //             var transaction = db.transaction(["cat_data"], "readwrite");
        //             var objectStore = transaction.objectStore("cat_data");
        //             lastJson.forEach(function(ele) {
        //                 objectStore.add(JSON.parse(ele));
        //                 // objectStore.add(ele);
        //             });
        //             timecat.replay({})
        //             console.log("打开数据库成功");
        //             f
        //         };
        //     }
        // };
    </script>
    <style>
        .user-info {
            position: absolute;
            top: 0px;
            left: 610px;
        }
        
        .user-info-list {
            position: absolute;
            top: 650px;
            left: 10px;
        }
        
        .user-info-list ul {
            margin: 0px;
        }
        
        .user-info-list ul li {
            list-style: none;
        }
        
        .user-info ul li {
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            list-style: none;
            text-align: left;
        }
        
        .audit {
            text-align: center;
        }
        
        #app {
            height: auto;
            position: absolute;
            width: 100%;
            height: 100%;
            /* left: 510px;
            top: 0px; */
        }
        
        #cat-main {
            height: 600px !important;
            left: 0px !important;
            top: 0px !important;
            width: 600px !important;
        }
        
        #cat-player {
            /* height: 500px;
            width: 500px; */
        }
    </style>
</body>

</html>